<template>
  <ListLayout class="zcgl-fjgl-list-wrap">
    <!-- 左侧 -->

    <template slot="top-left">
      <el-select placeholder="请选择项目" multiple v-model="projectId" style="width:250px">
        <el-option
          v-for="(item, index) in projectList"
          :key="index"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </template>

    <!-- 右侧 -->
    <template slot="top-right">
      <el-button @click="createPageHandler">新增房间</el-button>
      <el-popover placement="bottom" trigger="click">
        <p class="xlBtn">导入模板</p>
        <p class="xlBtn">导入记录</p>
        <el-button type="primary" slot="reference">批量导入</el-button>
      </el-popover>
      <el-popover placement="bottom" trigger="click">
        <p class="xlBtn">导出模板</p>
        <p class="xlBtn">导出记录</p>
        <el-button type="success" slot="reference">批量导出</el-button>
      </el-popover>
      <el-button type="warning">拆分</el-button>
    </template>

    <!-- 切换tabs -->
    <ul class="type-back-wrap clearFloat" slot="top-left">
      <li
        v-for="(item, index) in typeList"
        :key="index"
        :class="{'active': timeType === item.code}"
        @click="handleSwitchTime(item.code)"
      >{{item.label}} ({{item.num}})</li>
    </ul>
    <!-- 查询条件 -->
    <template slot="top-left">
      <el-form
        slot="top-right"
        :ref="queryFormRef"
        inline
        class="search-form"
        :model="queryFormData"
        label-width="70px"
        @submit.native.prevent
        size="mini"
        style="margin-top:20px;"
      >
        <el-form-item prop="name" label-width="150" label="资源类型">
          <el-select placeholder="请选择资源类型" multiple v-model="projectId" style="width:200px">
            <el-option
              v-for="(item, index) in projectList"
              :key="index"
              :label="item.label"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="name" label-width="150">
          <el-input
            type="text"
            v-model="queryFormData.name"
            clearable
            style="width: 230px;"
            placeholder="请输入搜索关键字"
          >
            <el-button slot="append" icon="el-icon-search" @click="queryHandler"></el-button>
          </el-input>
        </el-form-item>
      </el-form>
    </template>

    <!-- 列表 -->
    <div slot="table" class="table-bottom">
      <LeftRightLayout>
        <!-- 左侧组织树 -->
        <div slot="left" class="left-tree">
          <div class="tree-title">
            <div class="title">楼栋结构</div>
            <div class="sort" @click="sortClick">
              <i class="el-icon-caret-top" :style="{color:colorType?'#34495e':'#2196F3'}"></i>
              <i class="el-icon-caret-bottom" :style="{color:!colorType?'#34495e':'#2196F3'}"></i>
            </div>
            <div class="sort">
              <i class="el-icon-plus" @click="createHandler()"></i>
            </div>
          </div>
          <el-tree :data="ldList" @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span class="treeName">
                <i></i>
                {{ node.label }}
              </span>
              <i v-if="data.level!='child'" class="el-icon-plus" @click="createHandler(data.level)"></i>
              <i class="el-icon-delete" @click="deleteClick(data)"></i>
            </span>
          </el-tree>
        </div>
        <!-- 右侧 -->
        <el-table slot="right" :data="page.list" class="background-table" lazy height="97%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column show-overflow-tooltip label="房间" prop="fjName"></el-table-column>
          <el-table-column show-overflow-tooltip label="资源类型" prop="type"></el-table-column>
          <el-table-column show-overflow-tooltip label="建筑面积" prop="jzmj"></el-table-column>
          <el-table-column show-overflow-tooltip label="计租面积" prop="jzmj"></el-table-column>
          <el-table-column show-overflow-tooltip label="单价" prop="dj"></el-table-column>
          <el-table-column show-overflow-tooltip label="状态" prop="status"></el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="props">
              <el-button plain type="info" @click="detailPageHandler({ id: props.row.id})">查看</el-button>
              <el-button plain type="warning" @click="editPageHandler({ id: props.row.id})">编辑</el-button>
              <el-button plain type="danger" @click="editPageHandler({ id: props.row.id})">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </LeftRightLayout>
    </div>
    <add :ref="dialogRef"></add>
  </ListLayout>
</template>

<script>
export default JBoot({
  props: {},
  components: {
    add: require("./components/add").default
  },

  data() {
    return {
      moduleName: "fjgl",
      listMethod: "queryResources",
      deleteMethod: "deleteLdData",
      createPageName: "fjglAdd",
      projectId: "",
      projectList: [],
      type: "all",
      timeType: "all",
      typeList: [
        { label: "全部", code: "all", num: 10 },
        { label: "闲置中", code: "xzz", num: 8 },
        { label: "待入驻", code: "drz", num: 2 },
        { label: "在租中", code: "zxz", num: 2 },
        { label: "不可租", code: "yjs", num: 2 }
      ],
      ldList: [],
      colorType:''
    };
  },
  computed: {},

  methods: {
    afterInit() {
      this.$api("project", "queryProjectZyType").then(response => {
        this.$set(this, "projectList", response.data);
      });
      this.$api("fjgl", "queryResourcesType").then(response => {
        this.$set(this, "projectList", response.data);
      });
      this.queryLdList()
    },
    queryLdList(){
       this.$api("fjgl", "queryLdList").then(response => {
        this.$set(this, "ldList", response.data);
      });
    },
    getQueryParam() {
      return Object.assign({}, this.queryFormData, {
        code: this.timeType
      });
    },
    //点击tabs查询列表
    handleSwitchTime(value) {
      this.$set(this, "timeType", value);
      this.queryHandler();
    },
    //点击组织树查询右侧数据
    handleNodeClick(data) {
      this.queryHandler();
    },
    sortClick(){
      if(this.colorType){
        this.colorType = false
      }else{
        this.colorType = true
      }
      this.queryLdList();
    },
    deleteClick(e) {
      //判断点击父级下有数据不允许删除
      if (e.level == "parents") {
        for (let i = 0; i < this.ldList.length; i++) {
          if (e.value == this.ldList[i].value) {
            console.log(this.ldList[i].children);
            if (!this.ldList[i].children.length == 0) {
              this.$message({
                message: "此楼栋下有子级数据不允许删除！",
                type: "warning"
              });
            } else {
              this.deleteHandler({ id: e.value });
            }
          }
        }
      } else if (e.level == "child") {
        this.deleteHandler({ id: e.value });
      }
    }
  },

  watch: {}
})
  .list()
  .build();
</script>

<style lang="scss">
.zcgl-fjgl-list-wrap {
  & .title-container {
    padding: 5px !important;
    & > .top-left {
      float: left;
      & > .type-wrap {
        height: 35px;
        line-height: 35px;
        margin-top: 20px;
        & li {
          float: left;
          margin: 0 10px;
          cursor: pointer;
          font-size: 14px;
          height: 100%;
          padding: 0 5px;
          border-bottom: 2px transparent;
          transition: color, border-bottom-color 0.3s;
          user-select: none;
          &.active {
            border-bottom: 2px solid #2196f3;
            color: #2196f3;
          }
        }
      }
      & > .type-back-wrap {
        height: 35px;
        line-height: 35px;
        margin-top: 20px;
        & li {
          float: left;
          margin: 0 2px;
          cursor: pointer;
          font-size: 14px;
          height: 100%;
          padding: 0 15px;
          border-bottom: 2px transparent;
          transition: color, border-bottom-color 0.3s;
          user-select: none;
          background-color: #f2f2f2;
          color: #606266;
          &.active {
            background-color: #2196f3;
            color: #fff;
          }
        }
      }
    }
  }
  .top-right {
    .xlBtn {
      text-align: center;
    }
  }
  .table-bottom {
    width: 100%;
    height: calc(100% - 90px);
    float: left;
    .left-tree {
      height: calc(100% - 20px);
      margin-top: 5px;
      border-right: solid #f2f2f2 1px;
      .tree-title {
        width: calc(100% - 10px);
        height: 40px;
        line-height: 40px;
        background-color: #f2f2f2;
        padding: 0px 0px 0px 10px;
        font-size: 14px;
        position: relative;
        .title {
          width: 130px;
          float: left;
        }
        .sort {
          float: left;
          width: 20px;
          height: 20px;
          margin-top: 10px;
          margin-right: 6px;
          line-height: 20px;
          text-align: center;
          cursor: pointer;
          position: relative;
        }
        .sort:hover{
          background-color: #e1e1e1;
        }
        .el-icon-caret-top {
          position: absolute;
          top: 0px;
          left:3px;
        }
        .el-icon-caret-bottom {
          position: absolute;
          top: 8px;
          left:3px;
        }
      }
      .el-tree-node__content {
        font-size: 14px;
        position: relative;
        .el-icon-plus {
          position: absolute;
          right: 40px;
        }
        .el-icon-delete {
          position: absolute;
          right: 10px;
        }
        i {
          padding: 5px;
          cursor: pointer;
        }
        i:hover {
          background-color: #e1e1e1;
        }
      }
    }
    .right-wrap {
      height: calc(100% - 20px);
      margin-top: 5px;
    }
  }
}
.el-popover {
  min-width: 100px;
  padding: 0px;
  .xlBtn {
    text-align: center;
    line-height: 25px;
  }
  .xlBtn:first-child {
    border-bottom: solid #f2f2f2 1px;
  }
}
</style>
